<template>
    <div> 

        <h2>计算属性：compoted</h2>
        <h2>我的年龄{{age}} 岁</h2>
        <h2>我哥哥年龄{{getBro}}岁</h2>
        <h2>我哥哥年龄{{getBro}}岁</h2>
        <h2>我哥哥年龄{{getBro}}岁</h2>
        <h2>我哥哥年龄{{getBro}}岁</h2>
          <!-- 方法处理的数据 -->
        <h3>{{ getMbro1()}}</h3>
        <h3>{{ getMbro1()}}</h3>
        <h3>{{ getMbro1()}}</h3>
        <!-- 
        我的年龄 30
        我哥哥的年龄 大10

        //使用：在实例上添加一个属性 computed=》值是一个对象=》在对象中定义计算属性
        //作用：后台给数据或者是data中定义值，不是我直接在视图中想要的数据，这个时候通过计算属性进行处理变成我们想要的数据
         
         //写法： 写computed 属性他的值是一个方法 ，这个方法有一个return 


         注意：（1）计算属性只能写同步的方法
               (2) 计算属性具有缓存机制=》依赖的数据没有改变，执行一次
         -->
    </div>
</template>

<script>
export default {//当前组件的实例
    data(){ //存放数据
        return{
           age:30
        }
    },
    computed:{
        // 这里属性=》自定义=》语义化
        getBro(){ // es6
              //this=>当前组件的实例=》
              let a  =0
              console.log('具有缓存机制')
              setTimeout(() => {
                 a = 100
              }, 1000);
             return this.age +a //40 这里依赖的数据没有改变
        }
    },
    methods:{
        getMbro1(){
            console.log('在methods中定义方法处理的数据');
              return this.age +20 
        }
    }

    // 面试题=》就是methods 中定义方法也可以处理数据，把这个数据变成我们想要的数据？
    // methods中定义的方法 没有缓存机制
    
}
</script>

<style>

</style>